<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>
</head>
<body>

<div id="app">
    <h3>测试挂载:vue挂载到id=app上之前、之后</h3>
    <span style="background-color: crimson" id="mySpan">页面元素</span>
</div>

</body>

<script>

    Vue.createApp({
        data(){
            return{
                msg:'消息....'
            }
        },
        beforeCreate() {console.log("beforeCreate")},
        created() {console.log("created")},
        beforeMount() {
            console.log("beforeMount")
            console.log(document.getElementById('mySpan'))

        },
        mounted() {
            console.log("mounted")
            console.log(document.getElementById('mySpan'))
        },
        beforeUpdate() {console.log("beforeUpdate")},
        updated() {console.log("updated")},
        beforeUnmount() {console.log("beforeUnmount")},
        unmounted() {console.log("unmounted")},
        methods: {
            m1(){}
        }


    }).mount("#app")
</script>

</html>